<template>
    <div>
        <h3>门店列表</h3>
        <input type="button" value="添加门店" @click="add">
        <div>
        
            门店:<input type="text" v-model="a.doorname">
            服务范围:<select v-model="a.doortype">
                <option value="">请选择</option>
                <option value="早餐早点">早餐早点</option>
                <option value="炒菜炒饭">炒菜炒饭</option>
                <option value="包办婚宴">包办婚宴</option>
            </select>
            <input type="button" value="查询" @click="getlist">
            <input type="button" value="批量删除" @click="delall">
            <input type="button" value="批量启用" @click="updatestate(1)">
            <input type="button" value="批量禁用" @click="updatestate(2)">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checked" @click="checkall"></td>
                    <td>Id</td>
                    <td>门店</td>
                    <td>地址</td>
                    <td>门店logo</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>营业时间</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list">
                    <td><input type="checkbox" v-model="ids" @change="checkone" :value="item.Id"></td>
                    <td>{{ item.Id }}</td>
                    <td>{{ item.DoorName }}</td>
                    <td>{{ item.Address }}</td>
                    <td><img :src="item.DoorLogo" width="100" /></td>
                    <td>{{ item.DoorType }}</td>
                    <td>{{ item.UserName }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ moment(item.StartTime).format("YYYY-MM-DD") }}
                        ————{{ moment(item.EndTime).format("YYYY-MM-DD ") }}
                    </td>
                    <td>{{ item.State == 1 ? "启用" : "禁用" }}</td>
                    <td><input type="button" value="修改" @click="update(item.Id)"></td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共{{ data.zongHang }}条</span>
            <span>每页{{ a.pageHang }}条</span>
            <span>共{{ a.pageYe }}/{{ data.zongYe }}页</span>
            <input type="button" value="首页" @click="gopage(1)">
            <input type="button" value="上一页" @click="gopage(a.pageYe - 1)">
            <span v-for="item in data.zongYe" @click="gopage(item)">{{ item }}</span>
            <input type="button" value="下一页" @click="gopage(a.pageYe + 1)">
            <input type="button" value="尾页" @click="gopage(data.zongYe)">
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import axios from 'axios';
import moment from 'moment';
import { useRoute, useRouter } from 'vue-router';
import { idText } from 'typescript';
const route = useRoute();
const router = useRouter();
const add: any = () => {
    router.push("/dooradd");
}



const update: any = (id: any) => {
    router.push({
        path: '/updatedoor',
        query: { id: id }
    })
}

onMounted(() => {
    show();
})

let checked: any = ref(false);

let ids: any = ref([]);

let a: any = reactive({
    pageYe: 1,
    pageHang: 2,
    doorname: '',
    doortype: ''
})

let data: any = reactive({
    list: [],
    zongHang: '',
    zongYe: ''
})

const updatestate:any=(state:any)=>{
    if(ids.value.length==0)
    {
        alert("请至少选择一个");
        return
    }
    let f=confirm("确定修改?")
    if(f){
        axios({
            url:'/api/ALL/UpdateAll',
            method:'put',
            params:{ids:ids.value.toString(),
                state:state
            }
        })
        .then((res)=>{
            if(res.data>0)
            {
                alert("修改成功");
                checked.value=false;
                ids.value=[]
                show();
            }
        })
    }
}

const delall:any=()=>{
    if(ids.value.length==0)
    {
        alert("请至少选择一个");
        return
    }
    let f=confirm("确定删除?")
    if(f){
        axios({
            url:'/api/ALL/DelAll',
            method:'delete',
            params:{ids:ids.value.toString()}
        })
        .then((res)=>{
            if(res.data>0)
            {
                alert("删除成功");
                checked.value=false;
                show();
            }
        })
    }
}

const checkall: any = () => {
    checked.value =!checked.value;
    if (checked.value == true) {
        ids.value=data.list.map((item: any) => {
            return item.Id
        })
    }
    else{
        checked.value=false;
        ids.value=[];
    }
}

const checkone:any=()=>{
    if(ids.value.length==data.list.length)
    {
        checked.value=true;
    }
    else
    {
        checked.value=false;
    }
}

const gopage: any = (num: any) => {
    if (num < 1) {
        a.pageYe = 1;
        return;
    }
    if (num > data.zongYe) {
        a.pageYe = data.zongYe
        return;
    }
    a.pageYe = num;
    show();

}

const getlist: any = () => {
    a.pageYe = 1;
    show();
}

const show: any = () => {
    axios({
        url: '/api/ALL/ShowDoor',
        method: 'get',
        params: a
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list
            data.zongYe = res.data.zongYe
            data.zongHang = res.data.zongHang
        })
}

</script>

<style scoped>
span {
    margin: 0 5px;
}

input {
    margin: 0 3px;
}
</style>